<%--
  Created by IntelliJ IDEA.
  User: 风间琉璃
  Date: 2021/7/1
  Time: 16:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
    <h1>疫苗接种预约系统</h1>
    <form method="post" action="BookingServlet?opr=list" name="myForm">
      用户名：<input name="userName" id="userName" placeholder="模糊查询" value="${userName}">
      接种状态：
      <select name="status">
        <option value="-1" selected>全部</option>
        <option value="0" <c:if test="${status == 0}">selected</c:if>>未接种</option>
        <option value="1" <c:if test="${status == 1}">selected</c:if>>已接种</option>
      </select>
      <button type="submit">Go</button>
    </form>
    <button id="add">添加预约</button>
    <table border="1">
      <tr style="background-color: brown">
        <td>预约人姓名</td>
        <td>预约人身份证号</td>
        <td>接种状态</td>
        <td>预约接种时间</td>
        <td>操作</td>
      </tr>
      <c:forEach items="${list}" var="booking" varStatus="status">
        <tr <c:if test="${status.index % 2 == 1}">style="background-color: grey" </c:if>>
          <td>${booking.userName}</td>
          <td>${booking.cardId}</td>
          <td>${booking.status == 0 ? "预约" : "已接种"}</td>
          <td>${booking.bookingDate}</td>
          <td>
            <a class="booking" bookingId="${booking.id}" href="javascript:void(0)">完成接种</a>
            <a class="del" bookingid="${booking.id}" href="javascript:void(0)">删除</a>
          </td>
        </tr>
      </c:forEach>
    </table>
    <c:if test="${pageIndex > 1}">
      <c:if test="${userName!=null}"></c:if>
      <a href="BookingServlet?opr=list&pageIndex=${pageIndex-1}&userName=${userName}&status=${status}">上一页</a>
    </c:if>
      当前在${pageIndex},共${pageCount}页

    <c:if test="${pageIndex < pageCount}">
      <a href="BookingServlet?opr=list&pageIndex=${pageIndex+1}&userName=${userName}&status=${status}">下一页</a>
    </c:if>
  </body>
<script src="js/jquery-1.8.3.js"></script>
<script>
  $(document).ready(function (){
    $("#add").click(function (){
      location.href="add.jsp";
    })
    $(".del").click(function (){
      var id = $(this).attr("bookingid");
      var node = $(this).parent().parent();
      var isdel = confirm("是否删除");
      if(isdel){
        $.post("BookingServlet?opr=del","id="+id,function (data){
          if (data=="删除成功"){
            node.remove();
          }
          alert(data);
        })
      }
    })
    $(".booking").click(function (){
      var status = $(this).parent().prev().prev();
      var id = $(this).attr("bookingId");
      if (status.text() == "已接种"){
        alert("该用户已接种！");
        return ;
      }
      var isBooking = confirm("确认接种？");
      if (isBooking){
        $.post("BookingServlet?opr=update",{id:id},function (data){
          alert(data);
          if (data == "接种成功"){
            status.text("已接种");
          }
        });
      }
    })
  })
</script>
</html>
